@import '../style/theme/color';
@import '../style/theme/variables';
@import '../style/mixins/index';

$devui-checkbox-font-size: 14px;

.devui-checkbox {
  font-size: $devui-checkbox-font-size;
  text-align: left;
  label {
    color: $dark1;
  }


  .devui-checkbox-material {
    border-color: $gray1;
  }

  svg {
    .check-symbol {
      fill: none;
    }
    .checked-border{
      fill: $white;
    }
    .halfchecked-symbol {
      fill: $focus1;
    }
  }

  &.checked, &.halfchecked {
    .devui-checkbox-material{
      border-color: $focus1;
    }
  }

  &.checked {
    svg {
      .check-symbol {
        fill: $white;
      }
      .checked-border{
        fill: $focus1;
      }
    }
  }
  &:not(.disabled) {
    .devui-checkbox-material {
      &:hover{
        border-color: $hover-control;
      }
      &:active, &:focus {
        border-color: $focus2;
      }
    }
    // 激活状态hover内容要变色
    &.checked .devui-checkbox-material {
      &:hover {
        svg {
         .checked-border,
         .halfchecked-symbol{
           fill: $hover-control;
         }
        }
      }
      &:active, &:focus, &:hover:active, &:hover:focus {
        svg {
          .checked-border,
          .halfchecked-symbol{
           fill: $focus2;
         }
        }
      }
    }
  }
}
